<template>
  <view class="summary-card" :style="{padding,boxShadow,borderRadius}">
    <view class="flex-column">
      <text class="text-24 color-t3">{{ title }}</text>
      <text class="text-60 color-primary text-bold margin-top-16">{{ totalAmount ? totalAmount.toFixed(2) : '-' }}</text>
    </view>
    <view class="margin-top-30 flex-row align-center">
      <view v-for="(item,index) in info" :key="index" class="flex-column summary-item">
        <text class="text-24 color-t3">{{ item.label }}</text>
        <text class="text-36 color-primary text-bold margin-top-16">{{ item.value ? item.value.toFixed(2) : '-' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SummaryCard',
  props: {
    totalAmount: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    info: {
      type: Array,
      default: () => []
    },
    padding: {
      type: String,
      default: ''
    },
    boxShadow: {
      type: String,
      default: ''
    },
    borderRadius: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="scss">
.summary-card{
  background: $color-secondary;
  box-shadow: 0 10rpx 10rpx 2rpx rgba(0,0,0,0.16);
  border-radius: 20rpx;
  padding:32rpx 40rpx 40rpx;
}
.summary-item{
  margin-right:90rpx;
}
.summary-item:last-child{
  margin:0;
}
</style>
